<template>
  <div class="is-user-avatar">
    <img :src="newUserAvatar" :alt="name">
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  name: 'UserAvatar',
  computed: {
    newUserAvatar() {
      if (this.avatar) {
        return this.avatar
      }
      let name = 'somename'
      if (this.userName) {
        name = this.userName.replace(/[^a-z0-9]+/i, '')
      }
      return `https://avatars.dicebear.com/v2/human/${name}.svg?options[mood][]=happy`
    },
    ...mapGetters(['avatar', 'name'])
  }
}
</script>
